<%--
  Created by IntelliJ IDEA.
  User: landeqing
  Date: 2018/1/27
  Time: 21:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="/jquery/jquery-3.2.1.min.js"></script>
<html>
<head>
    <title>京东商城</title>
    <script type="text/javascript">
        function typeTwoList(oneTypeId) {
            $.ajax({
                url: "/productTotalList/productTwoTypeList?oneTypeId=" + oneTypeId,
                type: "get",
                cache: false,
                success: function (res) {
                    var twoTypeList = eval(res);
                    var strhtml = "";
                    for (var i = 0; i < twoTypeList.length; i++) {
                        var typeTwoName = twoTypeList[i].type_name_two;
                        if (i % 2 == 0) {
                            strhtml += "<table>";
                        }
                        var twoTypeId = twoTypeList[i].id;
                        strhtml += "<tr><td><a href='#' onclick='javascript:typeThreeList(" + twoTypeId + ")'>" + typeTwoName + " </a></td></tr>";
                        if (i % 2 == 1) {
                            strhtml += "</table>";
                        }

                    }
                    $("#div2").html(strhtml);
                }
            });
        }

        function typeThreeList(twoTypeId) {
            $.ajax({
                url:"/productTotalList/productThreeTypeList?twoTypeId="+twoTypeId,
                type:"get",
                cache:false,
                success:function (res) {
                    var threeTypeList=eval(res);
                    var strhtml="";
                    for(var i=0;i<threeTypeList.length;i++){
                        var typeNameThree=threeTypeList[i].type_name_three;
                        if (i%2==0){
                            strhtml+="<table>";
                        }
                        strhtml+="<tr><td><a href='/product/productList?productTypeId=" +threeTypeList[i].id+"'>" +typeNameThree + "</a></td></tr>";
                        if (i%2==1){
                            strhtml+= "</table>";
                        }
                    }
                    $("#div3").html(strhtml);
                }
            });
        }
        function loginOut() {
            window.location.href="/user/loginOut"

        }
    </script>
</head>
<body>
<div>
    <div style="background-color: darkgray;width:auto;height: 50px;" id="loginDiv">
        <p id="loginId">${ sessionScope.user.user_name}登录成功！</p>
        <p align="right"><input type="button" value="退出登录" onclick="loginOut()"></p>
    </div>
    <div style="width: auto;height:100px; background-color: aliceblue">
        <h3 style="color: red;" align="center">商品类别总列表</h3>
    </div>
    <div>
        <div style="width: 300px; height: auto; background-color:greenyellow;display: inline-block" id="div1">
            <table>
                <c:forEach items="${typeOneList}" var="obj">
                    <tr>
                        <td>
                            <a href="#" onclick="typeTwoList(${obj.id})">${obj.type_name_one}</a>
                        </td>
                    </tr>
                    <br>
                </c:forEach>
            </table>
        </div>
        <div id="div2" style="background-color:red;width: 150px;height: auto; display: inline-block">
        </div>
        <div id="div3" style="background-color:yellowgreen;width: auto;height: auto; display: inline-block">
        </div>

    </div>
</div>
</body>
</html>
